<template>
  <div
    ref="draggableElement"
    :class="['draggable-container', isAbsolute ? 'draggableinit' : '']"
    isFixed
    :style="{ width: width, ...style }"
  >
    <div
      class="draggable-title"
      v-if="showHeader"
      :style="{ cursor: !isuseDraggable ? 'default' : 'grab' }"
    >
      <span class="title"> {{ title }}</span>
      <slot name="header"></slot>
      <div class="close" v-if="showHeader" @click.stop="closeDialog"></div>
      <div class="close closebg" v-else @click.stop="closeDialog"></div>
    </div>
    <div
      class="draggable-title nobg-title"
      v-else
      :style="{ cursor: !isuseDraggable ? 'default' : 'grab' }"
    >
      {{ title }}
      <slot name="header"></slot>
      <div class="close" v-if="showHeader" @click.stop="closeDialog"></div>
      <div class="close closebg" v-else @click.stop="closeDialog"></div>
    </div>

    <div class="tconten">
      <slot></slot>
    </div>
  </div>
</template>  
     
    
    <script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue'
import { useDraggable } from '../hook/useDraggable'

const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  style: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '450px'
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  isuseDraggable: {
    type: Boolean,
    default: true
  },
  isAbsolute: {
    type: Boolean,
    default: false
  },
  isFixed: {
    type: Boolean,
    default: false
  },
  isInit:{
    type:Boolean,
     default: false
  }
})

const emits = defineEmits(['close'])
const draggableElement = ref(null)
let initData
if (props.isuseDraggable) {
  ;({ initData: initData } = useDraggable(draggableElement))
}

const closeDialog = () => {
  emits('close')
}

watch(()=>props.isInit,()=>{
   setTimeout(() => {
    initData()
   }, 500);
})
onMounted(() => {
  if (props.isuseDraggable && props.isFixed) {
    const a = draggableElement.value.getBoundingClientRect()
    draggableElement.value.style.position = 'fixed'
    draggableElement.value.style.left = a.x + 'px'
    draggableElement.value.style.top =
      window.document.body.clientHeight * 0.08 + 100 + props.yheight + 'px'
    initData()
  }
})
</script>  
      <style lang="scss" scoped>
.draggable-container {
  /* min-height: 200px; */
  width: 450px;
  background: rgba(0, 0, 10, 0.8);
  color: #ffffff;
  border: 1px solid #0e9cff;
  box-shadow: inset 0px 0px 80px 0px rgba(1, 194, 255, 0.4);
  z-index: 99;
}
.draggableinit {
  position: absolute;
}
.draggable-title {
  cursor: grab;
  user-select: none;
  height: 38px;
  line-height: 38px;
  padding-left: 35px;
  display: flex;
  background-image: url(/static/assets/3d/boxh.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  position: relative;
  .title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.nobg-title {
  background: rgba(0, 0, 10, 0.8);
  box-sizing: border-box;
  border: 1px solid #0e9cff;
  box-shadow: inset 0px 0px 87px 0px rgba(1, 194, 255, 0.4);
  background-image: none;
}
.closebg {
  background-image: url(/static/icon/删除@1x.png);
  background-size: 100% 100%;
}

.closebg:hover {
  transform: rotate(360deg);
  transition: all 1s ease;
}
.tconten {
  /* padding: 8px 20px; */
  padding: 15px;
  box-sizing: border-box;
}
.close {
  position: absolute;
  right: 6px;
  top: 15px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
</style>